<template>
    <div>
        <el-table
                :data="allArticles"
                style="width: 100%">
            <el-table-column
                    v-if="edit || deletes || huifu"
                    type="selection">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="id"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="标题"
                    width="180">
                <template slot-scope="scope">
                    <el-button type="text" @click="showArticleHtmlContent(scope.row)">{{scope.row.title}}</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="编辑时间">
            </el-table-column>
            <el-table-column
                    prop="category.catename"
                    label="所属栏目">
            </el-table-column>
            <el-table-column
                    prop="user.nickname"
                    label="作者">
            </el-table-column>
            <el-table-column label="操作" v-if="edit || deletes || huifu">
                <template slot-scope="scope">
                    <el-button
                            v-if="edit"
                            size="mini"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                            v-if="huifu"
                            size="mini"
                            @click="handleHuifu(scope.row)">还原</el-button>
                    <el-button
                            v-if="deletes"
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination
                @current-change="pageSerch"
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "ArticleShow",
        data(){
            return{
                allArticles:[],
                articleContent:{},
                pageSize:3,
                total:0,
                pageNumber:1,
                titleKeyWords:'',
                updateObj:{
                    id:0,
                    status:null
                }
            }
        },
        props:['edit','deletes','huifu','status'],
        methods:{
            initArticles(){
                this.$getRequest('/article/getArticlesByStatus?status='+this.status+'&titleKeyWords='+this.titleKeyWords+'&pageNumber='+this.pageNumber+'&pageSize='+this.pageSize).then(resp=>{
                    if(resp){
                        this.allArticles=resp.list;
                        this.total=resp.total
                    }
                })
            },
            initArticlesKeyWords(titleKeyWords){
                this.titleKeyWords = titleKeyWords
                this.initArticleWords();
            },
            handleEdit(row){
                /*this.$getRequest('/article/judgeAdminOrUser?uid='+row.user.id).then(resp=>{})*/
                this.$router.replace({
                    path:'/articlePublish',
                    query:{id:row.id}
                })
            },
            showArticleHtmlContent(row){
                this.$router.replace({
                    path:"/articleDetails",
                    query:{id:row.id}
                });
            },
            pageSerch(page){
                this.pageNumber=page;
                this.initArticleWords();
            },
            initArticleWords(){
                this.$getRequest('/article/getArticlesByStatus?status=' + this.status + '&titleKeyWords=' + this.titleKeyWords + '&pageNumber=' + this.pageNumber + '&pageSize=' + this.pageSize).then(resp => {
                    if (resp) {
                        this.allArticles = resp.list;
                        this.total = resp.total;
                    }
                });
            },
            handleHuifu(row){
                this.updateObj.id=row.id;
                this.updateHandler();
            },
            handleDelete(row){
                if(this.status==2){
                    this.$confirm('此操作将该文章永久删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$deleteRequest("/article/delArticleById/"+row.id).then(resp=>{
                            if(resp){
                                this.initArticleWords();
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }else {
                    this.$confirm('此操作将该文章存入回收站, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.updateObj.id=row.id;
                        this.updateObj.status=2;
                        this.updateHandler();
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },
            updateHandler(){
                this.$putRequest('/article/recoverArticle',this.updateObj).then(resp=>{
                    if(resp){
                        this.initArticleWords();
                    }
                })
            }
        },
        mounted() {
            this.initArticles();
        }
    }
</script>

<style scoped>

</style>